<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/ajax.js"></script>
    <script src="../js/api.js"></script>
    <style>
        .createCode{
            user-select: none;
        }
        .right{
            font-size: 12px;
            color: green;
        }
        .error{
            font-size: 12px;
            color: red;
        }
    </style>
</head>

<body>
    <div class="form">
        <div class="input-group">
            <lable>用户名:</lable>
            <input type="text" class="user">
            <span class="user_tips"></span>
        </div>
        <div class="input-group">
            <lable>密&emsp;码:</lable>
            <input type="text" class="pwd">
            <span class="pwd_tips"></span>
        </div>
        <div class="input-group">
            <lable>手机号:</lable>
            <input type="text" class="phone">
            <span class="phone_tips"></span>
        </div>
        <div class="input-group">
            <lable>邮&emsp;箱:</lable>
            <input type="text" class="email">
            <span class="email_tips"></span>
        </div>
        <!-- <div class="input-group">
            <lable>验证码:</lable>
            <input type="text" class="code">
            <span class="createCode">xy1d</span>
            <span class="code_tips"></span>
        </div> -->

        <div class="input-group">
            <input type="submit" class="btn" value="注册">
        </div>
    </div>
</body>
<script>
    // 用户名
    // 由数字 字母 _ 组成, 6-12位, 切不能以数字开头
    
    // 密码
    // 由数字 字母 _ 组成, 6-12位 
    // 密码强度
    // 如果 数字 大写字母 小写字母 _ 中只出现一种  弱   aaaaaa  111111 AAAAAA
    // 如果 数字 大写字母 小写字母 _ 中只出现两种  中   aaa111  AAA111 aaaAAA
    // 如果 数字 大写字母 小写字母 _ 中只出现三种  强   aaaAAA111  aaa111_  aaaAAA_
    // 如果 数字 大写字母 小写字母 _ 中只出现四种  超强 aaaAAA111_ 

    // 提升:  true + true + true + false = 3 

    // 确认密码 -> 密码成功的前提下,和密码保持一致

    // 验证码:  随机的验证码 和 用户输入的保持一直

</script>
<script>
    // 用户名
    // 由数字 字母 _ 组成, 6-12位, 切不能以数字开头

    // 按照从易到难的顺序:
    // a. 6-12位   /^.{6,12}$/
    // b. 切不能以数字开头   /^[^0-9]/
    // c. 由数字 字母 _ 组成 => 所有的字符都要在(数字 字母 _ )范围内 => 不在此范围内就是非法字符    /[\w]/  => 存在合法字符      /[^\w]/  => 是否存在合法字符    

    // 1. 建议失焦时分开验证

    // 2. 针对用户名 写两种:  1. 一步到位   2. 分开验证


  
    var userInp = document.getElementsByClassName("user")[0];
    var userTips = document.getElementsByClassName("user_tips")[0];

    var pwdInp = document.getElementsByClassName("pwd")[0];
    var pwdTips = document.getElementsByClassName("pwd_tips")[0];
    
    var phoneInp = document.getElementsByClassName("phone")[0];
    var phoneTips = document.getElementsByClassName("phone_tips")[0];

    var emailInp = document.getElementsByClassName("email")[0];
    var emailTips = document.getElementsByClassName("email_tips")[0];
    

    var btn = document.getElementsByClassName("btn")[0];
    console.log(userInp, userTips, btn);


    var isUserOk = false;
    var isPwdOk = false;
    var isPhoneOk = false;
    var isEmailOk = false;


    userInp.onchange = function(){
        var user = userInp.value;

        // 去除所有空格  => 将处理后的内容更新到输入框
        user = user.replace(/\s/g,"");
        userInp.value = user;

        isUserOk = false; // 每次校验之前  先将状态重置为false


        var userReg = /^[a-zA-Z_$][\w$]{5,11}$/; 
        if(userReg.test(user)){  // 格式校验成功  => 还要判断用户名是否被注册
          


            // var xhr = new XMLHttpRequest();
    
            // xhr.open("get","http://121.43.116.41/demo/php/isExistUser.php?user="+user,true);

            // xhr.send();

            // xhr.onreadystatechange = function(){
            //     if(xhr.readyState == 4 && xhr.status == 200){
            //         var result = xhr.responseText;

            //         result = JSON.parse(result);
            //         console.log(result);

            //         let {status,message} = result;
            //         if(status){
            //             userTips.textContent = "√";
            //             userTips.classList.remove("error");
            //             userTips.classList.add("right");
            //             isUserOk = true;
            //         }else{
            //             userTips.textContent = "用户名已被注册";
            //             userTips.classList.remove("right");
            //             userTips.classList.add("error");
            //         }
            //     }
            // }

            /* var p = ajaxPromise({
                type:"get",
                url:"http://121.43.116.41/demo/php/isExistUser.php",
                data:{
                    user,
                },
                dataType:"json",
            }).then((res)=>{
                    let {status,message} = res;
                    if(status){
                        userTips.textContent = "√";
                        userTips.classList.remove("error");
                        userTips.classList.add("right");
                        isUserOk = true;
                    }else{
                        userTips.textContent = "用户名已被注册";
                        userTips.classList.remove("right");
                        userTips.classList.add("error");
                    }

            }).catch((err)=>{
                
            }) */

            /* var p = isExistUser({user})
            p.then((res)=>{
                let {status,message} = res;
                if(status){
                    userTips.textContent = "√";
                    userTips.classList.remove("error");
                    userTips.classList.add("right");
                    isUserOk = true;
                }else{
                    userTips.textContent = "用户名已被注册";
                    userTips.classList.remove("right");
                    userTips.classList.add("error");
                }
            }).catch((err)=>{
                
            }) */

            isExistUser({user}).then((res)=>{
                    let {status,message} = res;
                    if(status){
                        userTips.textContent = "√";
                        userTips.classList.remove("error");
                        userTips.classList.add("right");
                        isUserOk = true;
                    }else{
                        userTips.textContent = "用户名已被注册";
                        userTips.classList.remove("right");
                        userTips.classList.add("error");
                    }

            }).catch((err)=>{
                
            })







        }else{
            userTips.textContent = "用户名由数字 字母 _ 组成, 6-12位, 且不能以数字开头";
            // userTips.style.color = "red";
            // userTips.style.fontSize = "12px";
            
            userTips.classList.remove("right");
            userTips.classList.add("error");
            
        }
    }


    pwdInp.onchange = function(){
        var pwd = pwdInp.value;

        isPwdOk = false;
        var pwdReg = /^\w{6,12}$/; 
        if(pwdReg.test(pwd)){

            // 密码强度校验  

            var isExistNum = /[0-9]/.test(pwd);
            var isExistBig = /[A-Z]/.test(pwd);
            var isExistSmall = /[a-z]/.test(pwd);
            var isExistSpe = /[_]/.test(pwd);

            var level = isExistNum + isExistBig + isExistSmall + isExistSpe;

            pwdTips.textContent = "密码强度:" + level;
            // pwdTips.style.color = "green";
            // pwdTips.style.fontSize = "12px";

            pwdTips.classList.remove("error");
            pwdTips.classList.add("right");

            isPwdOk = true;
        }else{
            pwdTips.textContent = "密码由数字 字母 _ 组成, 6-12位";
            // pwdTips.style.color = "red";
            // pwdTips.style.fontSize = "12px";

            pwdTips.classList.remove("right");
            pwdTips.classList.add("error");
        }
    }


    phoneInp.onchange = function(){
        var phone = phoneInp.value;

        isPhoneOk = false;
        var phoneReg = /^1[3-9]\d{9}$/; 
        if(phoneReg.test(phone)){
           


            /* var xhr = new XMLHttpRequest();
    
            xhr.open("get","http://121.43.116.41/demo/php/isExistPhone.php?phone="+phone,true);

            xhr.send();

            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && xhr.status == 200){
                    var result = xhr.responseText;

                    result = JSON.parse(result);
                    console.log(result);

                    let {status,message} = result;
                    if(status){
                        phoneTips.textContent = "√";
                        phoneTips.classList.remove("error");
                        phoneTips.classList.add("right");
                        isPhoneOk = true;

                        
                    }else{
                        phoneTips.textContent = "手机号已被注册";
                        phoneTips.classList.remove("right");
                        phoneTips.classList.add("error");
                    }
                }
            } */


            isExistPhone({phone}).then(res=>{
                var {status,message} = res;
                if(status){
                    phoneTips.textContent = "√";
                    phoneTips.classList.remove("error");
                    phoneTips.classList.add("right");
                    isPhoneOk = true;
                }else{
                    phoneTips.textContent = "手机号已被注册";
                    phoneTips.classList.remove("right");
                    phoneTips.classList.add("error");
                }

            }).catch(err=>{

            })
        }else{
            phoneTips.textContent = "请输入正确的手机号";
            phoneTips.classList.remove("right");
            phoneTips.classList.add("error");
        }
    }


    emailInp.onchange = function(){
        var email = emailInp.value;

        isEmailOk = false;
        
        // var emailReg = /^[a-zA-Z]\w{5,17}@(qq|163|126|sina|gmail)\.(com|cn)$/; 
        var emailReg = /^\w+@\w+\.\w+$/; 
        if(emailReg.test(email)){
            

            var xhr = new XMLHttpRequest();
    
            xhr.open("get","http://121.43.116.41/demo/php/isExistEmail.php?email="+email,true);

            xhr.send();

            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && xhr.status == 200){
                    var result = xhr.responseText;

                    result = JSON.parse(result);
                    console.log(result);

                    let {status,message} = result;
                    if(status){
                        emailTips.textContent = "√";
                        emailTips.classList.remove("error");
                        emailTips.classList.add("right");
                        isEmailOk = true;
                    }else{
                        emailTips.textContent = "邮箱已被注册";
                        emailTips.classList.remove("right");
                        emailTips.classList.add("error");
                    }
                }
            }

            isExistEmail({email}).then(res=>{
                var {status,message} = res;
                if(status){
                    emailTips.textContent = "√";
                    emailTips.classList.remove("error");
                    emailTips.classList.add("right");
                    isEmailOk = true;
                }else{
                    emailTips.textContent = "邮箱已被注册";
                    emailTips.classList.remove("right");
                    emailTips.classList.add("error");
                }

            }).catch(err=>{

            })

        }else{
            emailTips.textContent = "请输入正确的邮箱";
            emailTips.classList.remove("right");
            emailTips.classList.add("error");
        }
    }

    // 点击注册按钮 => 如果全都校验成功,就跳转页面
    btn.onclick = function(){
        console.log(isUserOk,isPwdOk,isPhoneOk,isEmailOk);
        if(isUserOk&&isPwdOk&&isPhoneOk&&isEmailOk){ 
            // 全都校验成功
            // (1) 将数据通过后端(服务端)存储到数据库  
            // (2) 注册成功之后进行跳转
            var user = userInp.value;
            var pwd = pwdInp.value;
            var phone = phoneInp.value;
            var email = emailInp.value;

            // post传参 =>  利用http post机制,将数据存放到请求主体(body)中,随请求头一同传给服务端
            // (1) 将数据改为FormData格式  => 配置请求头(请求时携带的数据)  
            // (2) 将参数数据对象作为实参传递到send(body)方法中


           /*  var xhr = new XMLHttpRequest();
    
            xhr.open("post",`http://121.43.116.41/demo/php/register.php`,true);

            // application/x-www-form-urlencoded 数据格式,是form表单post的默认格式
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xhr.send(`user=${user}&pwd=${pwd}&phone=${phone}&email=${email}`);

            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4 && xhr.status == 200){
                    var result = xhr.responseText;

                    result = JSON.parse(result);
                    console.log(result);

                    var {status,message} = result;
                    if(status){
                        location.href = "./login.html"
                    }
                }
            } */

            // 发送请求(pending)  => 根据请求结果改变Promise实例的状态(fulfilled/reject)
            var p = ajaxPromise({
                type:"post",
                url:"http://121.43.116.41/demo/php/register.php",
                data:{
                    user,
                    pwd,
                    phone,
                    email,
                },
                dataType:"json"
            })


            // then方法指定Promise实例状态改变之后的回调
            p.then((res)=>{

                var {status,message} = res;
                if(status){
                    location.href = "./login.html"
                }

            }).catch((err)=>{

            })





        }
    }

  

</script>

</html>